<!-- 订单配件使用 -->
<template>
	<view class="complete">
		<view class="order_detail">
			<view class="order_detail_item" @click="to_order">
				<view class="order_detail_icon">
					<image src="../../static/img/order_detail_icon.png"></image>
				</view>
				<view class="order_detail_text">订单详情</view>
				<view class="to_order_detail">
					<image src="../../static/img/back.png"></image>
				</view>
			</view>
			<view class="order_detail_item">
				<view class="order_no_text">订单编号</view>
				<view class="order_no_num">{{orderItem.orderNo}}</view>
			</view>
		</view>
		<view class="history">
			<view class="history_title">
				<view class="history_title_icon">
					<image src="../../static/img/history.png"></image>
				</view>
				<view class="history_title_text">维修历史</view>
			</view>
			<view class="history_content">
				<view class="history_content_item">
					<view class="history_item_time">报修时间</view>
					<view class="history_item_content">{{orderItem.orderDate}}</view>
				</view>
				<view class="history_content_item">
					<view class="history_item_time">上门时间</view>
					<view class="history_item_content">{{questionForm.dropTime}}</view>
				</view>
				<view class="history_content_item">
					<view class="history_item_time">处理时间</view>
					<view class="history_item_content">{{questionForm.dealTime}}</view>
				</view>
				<view class="history_content_item">
					<view class="history_item_time">处理地址</view>
					<view class="history_item_content">{{questionForm.dealAddress}}</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view @click="to_ordersList">确认</view>
		</view>
		<view class="kefu" @click="call_user">
			<view class="button-name">
				<image src="../../static/img/call_kefu.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dateTimeFormat
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				orderItem: {},
				questionForm: {},
				historyList: [],
			};
		},
		methods: {
			to_order() {
				uni.navigateTo({
					url: `/pagesIndex/confirm_order/confirm_order?orderItem=${JSON.stringify(this.orderItem)}&statusData=详情`
				});
			},
			call_user() {
				uni.makePhoneCall({
					phoneNumber: '1234567'
				});
			},
			to_ordersList() {
				uni.navigateBack()
			},
			//获取详情
			getRepairDeal() {
				let params = {
					orderNo: this.orderItem.orderNo
				}
				this.$newapi.getRepairDeal(params).then(res => {
					if (res.code == 200) {
						this.questionForm = res.data
						this.questionForm.createTime = dateTimeFormat(this.questionForm.createTime)
					}
				})
			},
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.orderItem = JSON.parse(options.orderItem)
			this.orderItem.orderDate = dateTimeFormat(this.orderItem.orderDate)
			this.getRepairDeal()
		}
	};
</script>

<style lang="less" scoped>
	.complete {
		width: 100%;
		// height: 1498rpx;
		background-image: url(https://www.bjroyalkitchen.com/images/root/20210511003.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		overflow-y: auto;
	}

	.order_detail {
		width: 100%;
		// height: 160rpx;
		background-color: rgba(255, 255, 255, .55);
		box-shadow: 0 6rpx 14rpx rgba(162, 162, 162, 0.1);
	}

	.order_detail_item {
		width: 90%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}

	.order_detail_icon {
		width: 8%;
		height: 100%;
	}

	.order_detail_icon image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
	}

	.order_detail_text {
		width: 70%;
		height: 100%;
		font-size: 30rpx;
		color: #333333;
		line-height: 80rpx;
		text-align: left;
	}

	.to_order_detail {
		width: 22%;
		height: 100%;
	}

	.to_order_detail image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 25rpx;
		float: right;
	}

	.order_no_text {
		width: 20%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #a2a2a2;
	}

	.order_no_num {
		width: 80%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #333333;
	}

	.history {
		width: 90%;
		height: 300rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(255, 255, 255, .55);
		border-radius: 20rpx;
	}

	.history_title {
		width: 90%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}

	.history_title_icon {
		width: 10%;
		height: 100%;
	}

	.history_title_icon image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 24rpx;
	}

	.history_title_text {
		width: 90%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #333333;
	}

	.history_content {
		width: 90%;
		height: 220rpx;
		margin: 0 auto;
		overflow: auto;
	}

	.history_content_item {
		width: 100%;
		height: 50rpx;
		display: flex;
		flex-direction: row;
	}

	.history_item_time {
		width: 30%;
		height: 100%;
		line-height: 50rpx;
		text-align: left;
		font-size: 26rpx;
		color: #333333;
	}

	.history_item_content {
		width: 70%;
		height: 100%;
		line-height: 50rpx;
		text-align: left;
		font-size: 26rpx;
		color: #a2a2a2;
	}

	.charging {
		width: 90%;
		height: auto;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: rgba(255, 255, 255, .55);
		border-radius: 20rpx;
	}

	.charging_title {
		width: 90%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}

	.charging_title_icon {
		width: 10%;
		height: 100%;
	}

	.charging_title_icon image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 24rpx;
	}

	.charging_title_text {
		width: 90%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #333333;
	}

	.charging_content {
		width: 90%;
		height: 530rpx;
		margin: 0 auto;
		overflow: auto;
	}

	.charging_content_item {
		width: 100%;
		height: 260rpx;
		margin-bottom: 10rpx;
		background-color: #f2f2f2;
		border-radius: 20rpx;
	}

	.item_title {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.item_title_index {
		width: 5%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		color: #333333;
		font-size: 30rpx;
	}

	.item_title_name {
		width: 60%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		color: #333333;
		font-size: 30rpx;
	}

	.item_content {
		width: 90%;
		height: 100rpx;
		border-bottom: 1rpx solid #ffffff;
		margin: 0 auto;
	}

	.item_content_info {
		width: 100%;
		height: 50rpx;
		display: flex;
		flex-direction: row;
	}

	.item_content_info_brand,
	.item_content_info_model {
		width: 60%;
		height: 100%;
		line-height: 50rpx;
		font-size: 26rpx;
		color: #a2a2a2;
		text-align: left;
	}

	.item_content_infounit_price,
	.item_content_info_num {
		width: 40%;
		height: 100%;
		line-height: 50rpx;
		font-size: 26rpx;
		color: #a2a2a2;
		text-align: left;
	}

	.item_money {
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		text-align: right;
		color: #333333;
		font-size: 30rpx;
		line-height: 80rpx;
	}

	.total {
		width: 90%;
		height: 240rpx;
		margin: 0 auto;
	}

	.parts_total,
	.worker_total,
	.total_money {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
	}

	.parts_total_title,
	.worker_total_title {
		width: 70%;
		height: 100%;
		line-height: 80rpx;
		text-align: left;
		font-size: 30rpx;
		color: #a2a2a2;
	}

	.parts_total_money,
	.worker_total_money {
		width: 30%;
		height: 100%;
		line-height: 80rpx;
		text-align: right;
		font-size: 30rpx;
		color: #333333;
	}

	.total_money_title {
		width: 80%;
		height: 100%;
		line-height: 80rpx;
		text-align: right;
		font-size: 32rpx;
		color: #333333;
	}

	.total_money_content {
		width: 30%;
		height: 100%;
		line-height: 80rpx;
		text-align: right;
		font-size: 32rpx;
		color: #ff0000;
	}

	.btn {
		width: 90%;
		height: 60rpx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.btn view {
		width: 30%;
		height: 100%;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		color: white;
		border-radius: 10rpx;
		letter-spacing: 2rpx;
		background: linear-gradient(to right, #6e81f3, #3057be);
		margin: 0 auto;
	}

	.kefu {
		// width: 100%;
		height: 90rpx;
		position: fixed;
		bottom: 100rpx;
		right: 0;
	}

	.button-name:not([size='mini']) {
		width: 90rpx;
		height: 90rpx;
		float: right;
		padding: 0;
	}
</style>